﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title th:text="${info?.name?:'未设置名称'}"></title>
    <meta name="keywords" th:content="${info?.keywords?:''}" content="">
    <meta name="description" th:content="${info?.description?:''}" content="">
    <link rel="icon" href="assets/img/img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="assets/css/css/index.css">
    <link href="assets/css/css/animate.css" rel="stylesheet">
</head>
<body>
<div class="about">
    <!-- 头部 -->
    <div id="head">
        <div th:include="pub_head"></div>
        <img src="uploads/20211231/2a4b2ad42ba80caceb7902ce80ea605c.jpg" class="banner bans">
    </div>
    <!-- 内容 -->
    <div class="about app allCont">
        <!-- 关于我们 -->
        <div class="us">
            <div class="commit_center flex">
                <div class="left wow slideInLeft animated">
                    <img src="assets/img/img/website_as.png">
                </div>
                <div class="right wow slideInRight animated">
                    <div class="commit_center">
                        <p>[[${modules[3].module.title}]]</p>
                        <p>
                            [[${modules[3].module.description}]]</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 企业文化 -->
        <div class="culture app">
            <div class="commit_center common">
                <p class="title">[[${modules[4].module.title}]]</p>
            </div>
            <!-- 企业文化-内容 -->
            <div class="commit_center flex service">
                <dl class="xk wow fadeInUp animated" data-wow-duration="2s" data-wow-delay="100ms" style="width:100%;">
                    <div class="commit_center">
                        <dt class="gray"><img src="uploads/20211221/d7bff46aacdbc561147b9261cd5dc739.png"></dt>
                        <dt class="blue"><img src="uploads/20211221/0419cb258c217a10c8ba428c48d92a4b.png"></dt>
                        <dd class="titles">[[${modules[4].banners[0].title}]]</dd>
                        <dd class="cont">[[${modules[4].banners[0].description}]]</dd>
                    </div>
                </dl>
                <dl class="xk wow fadeInUp animated" data-wow-duration="2s" data-wow-delay="100ms" style="width:100%;">
                    <div class="commit_center">
                        <dt class="gray"><img src="uploads/20211221/d7bff46aacdbc561147b9261cd5dc739.png"></dt>
                        <dt class="blue"><img src="uploads/20211221/0419cb258c217a10c8ba428c48d92a4b.png"></dt>
                        <dd class="titles">[[${modules[4].banners[1].title}]]</dd>
                        <dd class="cont">[[${modules[4].banners[1].description}]]</dd>
                    </div>
                </dl>
                <dl class="xk wow fadeInUp animated" data-wow-duration="2s" data-wow-delay="100ms" style="width:100%;">
                    <div class="commit_center">
                        <dt class="gray"><img src="uploads/20211221/d7bff46aacdbc561147b9261cd5dc739.png"></dt>
                        <dt class="blue"><img src="uploads/20211221/0419cb258c217a10c8ba428c48d92a4b.png"></dt>
                        <dd class="titles">[[${modules[4].banners[2].title}]]</dd>
                        <dd class="cont">[[${modules[4].banners[2].description}]]</dd>
                    </div>
                </dl>

            </div>
        </div>
        <!-- 关于我们 -->
        <div class="aboutUs">
            <div class="commit_center common">
                <p class="title">关于我们</p>
            </div>
            <!-- 关于我们-内容 -->
            <div class="commit_center flex cont">
                <div class="xk">
                    <p class="bigSize"><span class="counter">666</span><span class="jia">+</span></p>
                    <p>客户的选择</p>
                </div>
                <div class="xk">
                    <p class="bigSize"><span class="counter">150</span><span class="jia">+</span></p>
                    <p>覆盖行业</p>
                </div>
                <div class="xk">
                    <p class="bigSize"><span class="counter">30</span><span class="jia">+</span></p>
                    <p>开发团队人数</p>
                </div>
                <div class="xk">
                    <p class="bigSize"><span class="counter">63</span><span class="jia">+</span></p>
                    <p>口碑好评</p>
                </div>
            </div>
        </div>
        <!-- 联系地址 -->
        <div class="address">
            <div class="commit_center add">
                <!-- 上 -->
                <div class="flex top addressPc">
                    <div class="left">
                        <div class="commit_center">
                            <div class="flex line">
                                <img src="uploads/20211221/6de2989be0afa484430980e358c3456a.png">
                                <p>联系我们</p>
                            </div>
                            <div class="flex line">
                                <img src="uploads/20211221/5b96b35e6713f08791582499d2810001.png">
                                <p>山东柏瑞设计有限公司</p>
                            </div>
                            <div class="flex line">
                                <img src="uploads/20211221/c7cd46b1adbf967986c31dd054f49d24.png">
                                <p>18317093686</p>
                            </div>
                            <div class="flex line">
                                <img src="uploads/20211221/55d81e41d44773f8778a982938af39a9.png">
                                <p>1164029542@qq.com</p>
                            </div>
                            <div class="flex line">
                                <img src="uploads/20211221/fd3999164098887055cbe049f9559bda.png">
                                <p>济南市长清区崮云湖街道芙蓉路中国创新谷西城软件园A3楼503室</p>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="commit_center">
                            <div class="flex line">
                                <img src="assets/img/img/about_ly.png">
                                <p>填写留言</p>
                            </div>
                            <!-- 表单 -->
                            <form action="" method="post" class="flex">
                                <div class="borde">
                                    昵称:<input type="text" name="" id="name" value="">
                                </div>
                                <div class="borde">
                                    邮箱:<input type="text" name="" id="email" value="">
                                </div>
                                <div class="borde bordes">
                                    电话:<input type="text" name="" id="phone" value="">
                                </div>
                                <div class="txt">
                                    <textarea name="" id="content" cols="57" rows="12" placeholder="请输入留言..."
                                              placeholder-style="padding:2rem;border:1px solid #f00"></textarea>
                                </div>
                            </form>
                            <button type="button" id="sub">提交</button>
                        </div>
                    </div>
                </div>
                <!--phone-->
                <div class="flex top addressPhone">
                    <div class="right">
                        <div class="commit_center">
                            <div class="flex line">
                                <img src="assets/img/img/about_ly.png">
                                <p>填写留言</p>
                            </div>
                            <!-- 表单 -->
                            <form action="" method="post" class="flex">
                                <div class="borde">
                                    昵称:<input type="text" name="" id="names" value="">
                                </div>
                                <div class="borde">
                                    邮箱:<input type="text" name="" id="emails" value="">
                                </div>
                                <div class="borde bordes">
                                    电话:<input type="text" name="" id="phones" value="">
                                </div>
                                <div class="txt">
                                    <textarea name="" id="contents" cols="57" rows="12" placeholder="请输入留言..."
                                              placeholder-style="padding:2rem;border:1px solid #f00"></textarea>
                                </div>
                            </form>
                            <button type="button" id="subs">提交</button>
                        </div>
                    </div>

                    <div class="left">
                        <div class="commit_center">
                            <div class="flex line">
                                <img src="assets/img/img/about_lxwm.png">
                                <p>联系我们</p>
                            </div>
                            <div class="flex line">
                                <img src="assets/img/img/about_cy.png">
                                <p th:text="${info?.company?:''}">山东柏瑞软件科技有限公司</p>
                            </div>
                            <div class="flex line">
                                <img src="assets/img/img/about_dh.png" class="smallImg">
                                <p th:text="${info?.telephone?:''}">0538-2110108</p>
                            </div>
                            <div class="flex line">
                                <img src="assets/img/img/about_yx.png" class="smallImg">
                                <p th:text="${info?.email?:''}">WF18661349342@163.com</p>
                            </div>
                            <div class="flex line">
                                <img src="assets/img/img/about_db.png" class="addImg">
                                <p class="adds" th:text="${info?.address?:'未设置地址'}">济南市长清区崮云湖街道芙蓉路中国创新谷西城软件园A3楼503室</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 脚部 -->
    <div th:include="pub_footer"></div>


</div>
<!-- script -->
<script src="assets/js/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="layui%402.6.8/dist/layui.js"></script>
<!-- wow弹动 -->
<script src="assets/js/js/wow.min.js"></script>
<script src="assets/utils/index.js"></script>
<script src="jquery/2.0.0/jquery.min.js"></script>
<!-- 数值滚动 -->
<script src="assets/js/js/jquery.waypoints.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/js/jquery.countup.min.js"></script>
<script type="text/javascript">
	// 表单
	$(function () {
		$('#sub').click(function () {
			let name = $('#name').val()
			let email = $('#email').val()
			let phone = $('#phone').val()
			let content = $('#content').val()
			console.log(email,name,phone,content)
			if(name == ''){
				layer.msg('请输入昵称')
				return  false;
			}
			if(!name.match(/^[\u4E00-\u9FA5]{2,4}$/)){
				layer.msg('请输入正确的昵称！')
				$("#contact-name").focus();
				return  false;
			}
			if(email == ''){
				layer.msg('请输入邮箱')
				return  false;
			}
			if(!email.match(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)){
				layer.msg('邮箱格式错误,请重新输入！')
				$("#contact-email").focus();
				return  false;
			}
			if(phone == ''){
				layer.msg('请输入手机号码')
				return  false;
			}
			if(!phone.match(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
			)){
				layer.msg('手机号格式错误,请重新输入！')
				$("#contact-phone").focus();
				return  false;
			}
			if(content == ''){
				layer.msg('请留言')
				return  false;
			}
			if(content.length >255 ){
				layer.msg('留言内容不能超过255位')
				$("#contact-content").focus();
				return  false;
			}
			$.ajax({
				type: "POST",
				url: '/index/Form/add',
				data: {
					name: name,
					email: email,
					phone: phone,
					content: content,
				},
				dataType: "json",
				success: function (data) {
					layer.msg(data.msg);
					//重新加载页面
					if (data.code == 1) {
						setTimeout(function () {
							window.location.reload();
						}, 2000);
					}
				}
			});
			return false
		});
	});
	// 数值滚动
	$(function(){
		$('.counter').countUp({
			delay: 10,
			time: 2000
		});
	})
	new WOW()



</script>
<script type="text/javascript">
	// 表单
	$(function () {
		$('#subs').click(function () {
			let name = $('#names').val()
			let email = $('#emails').val()
			let phone = $('#phones').val()
			let content = $('#contents').val()
			console.log(email,name,phone,content)
			if(name == ''){
				layer.msg('请输入昵称')
				return  false;
			}
			if(!name.match(/^[\u4E00-\u9FA5]{2,4}$/)){
				layer.msg('请输入正确的昵称！')
				$("#contact-names").focus();
				return  false;
			}
			if(email == ''){
				layer.msg('请输入邮箱')
				return  false;
			}
			if(!email.match(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)){
				layer.msg('邮箱格式错误,请重新输入！')
				$("#contact-emails").focus();
				return  false;
			}
			if(phone == ''){
				layer.msg('请输入手机号码')
				return  false;
			}
			if(!phone.match(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
			)){
				layer.msg('手机号格式错误,请重新输入！')
				$("#contact-phone").focus();
				return  false;
			}
			if(content == ''){
				layer.msg('请留言')
				return  false;
			}
			if(content.length >255 ){
				layer.msg('留言内容不能超过255位')
				$("#contact-content").focus();
				return  false;
			}
			$.ajax({
				type: "POST",
				url: '/index/Form/add',
				data: {
					name: name,
					email: email,
					phone: phone,
					content: content,
				},
				dataType: "json",
				success: function (data) {
					layer.msg(data.msg);
					//重新加载页面
					if (data.code == 1) {
						setTimeout(function () {
							window.location.reload();
						}, 2000);
					}
				}
			});
			return false
		});
	});

</script>

<style>
	.app .service{
		padding: 1rem 0 3rem 0;
	}
	.app .service .xk{
		width: 30%;
	}
	.app .service .xk .commit_center{
		width: 90%;
		margin: 0 auto;
		padding: 2rem;
	}
	.app .service .titles{
		padding: 2rem 0;
	}
	.app .service .cont{
		line-height: 4rem;
		text-align: left;
		color: #666666;
	}
	.app .swiper-button-next,.app .swiper-button-prev {
		color: #c9c9c9!important;
	}

</style>

</body>
</html>
